<template>
  <div>
    <div class="module" v-show="bool">
      <div class="module-bg" @click="btn22"></div>
      <div class="boxs">
        <p>其他功能正在建设中！！！</p>
        <div class="box-button">
          <div class="l" @click="btn22">取消</div>
          <div class="r" @click="btn22">确定</div>
        </div>
      </div>
    </div>
    <div class="header"></div>
    <div class="box">
      <div class="touxiang">
        <img src="../assets/images/头像.png" width="100" alt="" />
      </div>
      <p>{{ arr.remark }}</p>
      <div class="box-bottom">
        <div>
          姓名：<span>{{ arr.nickName }}</span>
        </div>
        <div>
          联系方式：<span>{{ arr.phone }}</span>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="lists" @click="btn">
        <div>
          <img
            src="../assets/images/Personal information.png"
            width="15"
            alt=""
          />个人消息
        </div>
        <img src="../assets/images/jiantou.png" width="9" alt="" />
      </div>
      <div class="lists">
        <div @click="btn33">
          <img src="../assets/images/支付中心.png" width="15" alt="" />支付中心
        </div>
        <img src="../assets/images/jiantou.png" width="9" alt="" />
      </div>
      <div class="lists">
        <div @click="btn33">
          <img src="../assets/images/修改密码.png" width="15" alt="" />修改密码
        </div>
        <img src="../assets/images/jiantou.png" width="9" alt="" />
      </div>
      <div class="lists" @click="btn11">
        <div>
          <img src="../assets/images/版本信息.png" width="15" alt="" />版本信息
        </div>
        <p class="bbb">
          版本1.0<img src="../assets/images/jiantou.png" width="9" alt="" />
        </p>
      </div>
      <div class="lists">
        <div @click="btn33">
          <img src="../assets/images/清除缓存.png" width="15" alt="" />清除缓存
        </div>
        <img src="../assets/images/jiantou.png" width="9" alt="" />
      </div>
    </div>

    <div class="tuichu" @click="tuichu">退出登录</div>

    <div class="footer">
      <div @click="btn6">
        <img
          src="../assets/images/矢量智能对象-2.png"
          width="22"
          height="22"
          alt=""
        />
        <span>系统功能</span>
      </div>

      <div class="box-lianxi">
        <img src="../assets/images/联系.png" width="22" height="22" alt="" />
        <span>联系</span>
      </div>
      <div>
        <img
          src="../assets/images/矢量智能对象.png"
          width="22"
          height="22"
          alt=""
        />
        <span style="color: #00439c">个人中心</span>
      </div>
    </div>
  </div>
</template>

<script>
import { usersList } from "../request/api";
export default {
  data() {
    return {
      arr: [],
      bool: false,
    };
  },
  methods: {
      tuichu(){
          this.$router.push('/home/')
      },
      btn33(){
          this.bool=true
      },
      btn22(){
          this.bool=false
      },
    btn11() {
      this.$router.push("/banben/");
    },
    btn6() {
      this.$router.push("/home/funindex");
    },
    btn() {
      this.$router.push("/userList/");
    },
  },
  created() {
    usersList().then((res) => {
      if (res.errCode == 0) {
        this.arr = res.data;
        console.log(this.arr);
      }
    });
  },
};
</script>
 
<style lang = "less" scoped>
.module {
  position: fixed;
  z-index: 100;
  .module-bg {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
  }
  .boxs {
    position: absolute;
    top: 250px;
    left: 80px;
    border-radius: 5px;
    width: 60%;
    /* height: 100px; */
    background: #fff;
    p {
        font-size: 13px;
        color: #666;
      padding: 30px;
      text-align: center;
    }
    .box-button {
      height: 45px;
      line-height: 45px;
      border-top: 1px solid #666;
      display: flex;
      background: #fff;
      justify-content: space-between;
      padding: 0 30px;
      box-sizing: border-box;
      .r{
          color: blue;
      }
    }
  }
}
.footer {
  width: 100vw;
  height: 65px;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  div {
    /* padding: 10px 45px; */
    width: 100px;
    text-align: center;
    margin-top: 10px;
    img {
      display: block;
      margin-top: 5px;
      margin-left: 40px;
    }
  }
  div:nth-of-type(2) {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #ffcc33;
    text-align: center;
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0 0 4px 6px #efefef;
    margin-top: -15px;
    img {
      margin-left: 10px;
    }
  }
}
* {
  padding: 0;
  margin: 0;
}
.header {
  height: 155px;
  width: 100%;
  background: #1f3484;
}
.tuichu {
  width: 345px;
  background: #e8e8e8;
  height: 45px;
  line-height: 45px;
  text-align: center;
  margin: 40px auto 0;
  border-radius: 6px;
  color: #666666;
}
.bbb {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
  img {
    padding-left: 10px;
  }
}
.list {
  width: 345px;
  background: #fff;
  height: 230px;
  margin: 20px auto 0;
  border-radius: 6px;
  .lists {
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
    align-items: center;
    border-bottom: 1px solid #e4e4e4;
    div {
      img {
        margin-right: 10px;
      }
    }
  }
}
.box {
  width: 345px;
  background: #fff;
  height: 145px;
  margin: -50px auto 0;
  border-radius: 6px;
  position: relative;
  p {
    position: absolute;
    text-align: center;
    width: 100%;
    top: 60px;
    left: 0;
    color: #989898;
    font-size: 14px;
  }
  .touxiang {
    border-radius: 50%;
    position: absolute;
    top: -30%;
    left: 50%;
    box-shadow: 0 0 4px 6px rgba(255, 255, 255, 0.5);
    margin-left: -50px;
  }
  .box-bottom {
    position: absolute;
    border-top: 1px dashed #e4e4e4;
    bottom: 0;
    height: 50px;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    left: 0;
    display: flex;
    justify-content: space-between;
    color: #989898;
    align-items: center;
    div {
      span {
        color: #000;
      }
    }
  }
}
</style>